import {View} from "@tarojs/components";
import {useEffect, useState} from "react";

export default ({initData,renderData,seatData})=>{

  const [nav,setNav]=useState([])

  useEffect(() => {
    const navTmp=[]
    let start=1
    if(seatData){
      seatData.forEach(row=>{
        if(row.find(item=>!!item)){
          navTmp.push(start++)
        }else{
          navTmp.push('')
        }
      })
    }
    setNav(navTmp)
  }, [seatData]);

  return (
    <View className='seat-nav' style={`height:${initData.seatSize.h*initData.rows*renderData.scale}px;top:${initData.padding[0]*renderData.scale+renderData.y}px;width:${initData.padding[3]*0.6*renderData.scale}px;font-size:${18*renderData.scale}px;left:${initData.padding[3]*0.1*renderData.scale}px`}>
      {
        nav.map(item=>{
          return (
            <View key={item} className='nav-item' style={`height:${initData}px`}>{item}</View>
          )
        })
      }
    </View>
  )
}
